<!--  -->
<template>
  <div class='customList-page'>
    <c-title :text="title" :hide="false"></c-title>
    <van-notice-bar
      color="#FF9C43"
      background="#F7E8DB"
      :text="`每人最高购买${buyMax}`"
    />
    <div class="custom-list" v-if="customList.length > 0">
      <block v-for="(item,index) in customList" :key="index">
        <div class="custom-item flex" @click="goodsNav(item.id)">
          <div class="image">
            <img  :src="item.thumb_src" />
          </div>
          <div class="wrap flex">
            <h3 class="ell">{{item.title}}</h3>
            <div class="price">￥{{item.min_price}}</div>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="mb-50"></div>
  </div>
</template>

<script>
import customList_controller from "./customList_controller.js";
export default customList_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .customList-page ::v-deep .van-notice-bar__wrap {
    justify-content: center;
  }
  .mb-50 {
    height: 3.125rem;
    clear: both;
  }
  .ell {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 定义显示的行数 */
    overflow: hidden;
  }
  .custom-list {
    margin:0.75rem;
    .custom-item {
      background-color: #FFFFFF;
      border-radius: 0.75rem;
      padding:0.75rem;
      margin:0 0 0.75rem 0;
      .image {
        img {
          width: 4.375rem;
          height: 4.375rem;
          border-radius: 0.5rem;
          display: block;
        }
      }
      .wrap {
        text-align: left;
        padding:0 0 0 0.5rem;
        flex-direction: column;
        justify-content: space-between;
        h3 {
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 1.5rem;
        }
        .price {
          font-weight: 500;
          font-size: 1rem;
          color: #F15353;
        }
      }
    }
  }
</style>